<template>
  <div class="seven_content myStyle">
    <div class="content_top">
      <StrokeTitle2 title="数据统计" class="float margin" style="width: 99%">
        <div class="flex_center" slot="select">
          <ElementRadio
            v-model="model"
            :isButton="true"
            @change="radioChange1"
            :options="[
              {
                value: 'lastMonth',
                label: '上月',
              },
              { value: 'quarter', label: '当季' },
            ]"
          />
          <!-- <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList1" /> -->
        </div>
        <div class="flex_center Echarts" style="height: 100%" slot="content">
          <div class="bzjk_box flex_between">
            <div class="cntj_item backgroung">
              <nav class="flex_center">
                <div
                  class="cntj_item_content_item cntj_item_content_item50 flex_center_direction"
                >
                  全员人均产出
                </div>
                <div
                  class="cntj_item_content_item cntj_item_content_item50 flex_center_direction"
                  style="color: #ffbc00"
                >
                  内控
                </div>
              </nav>
              <div class="cntj_item_content flex_between">
                <div
                  class="cntj_item_content_item cntj_item_content_item50 flex_center_direction"
                >
                  <div class="number">
                    {{ top.qy1 || 0 }}
                  </div>
                </div>
                <div
                  class="cntj_item_content_item cntj_item_content_item50 flex_center_direction"
                >
                  <div class="number" style="color: #ffbc00">
                    {{ top.sumNk || 0 }}
                  </div>
                </div>
              </div>
            </div>
            <!-- <img src="@/assets/images/echarts/zu2.png" alt="" class="and" /> -->
            <div class="cntj_item backgroung">
              <nav class="flex_center">
                <div
                  class="cntj_item_content_item cntj_item_content_item50 flex_center_direction"
                >
                  单班产出率
                </div>
                <div
                  class="cntj_item_content_item cntj_item_content_item50 flex_center_direction"
                  style="color: #ffbc00"
                >
                  内控
                </div>
              </nav>
              <div class="cntj_item_content flex_between">
                <div
                  class="cntj_item_content_item cntj_item_content_item50 flex_center_direction"
                >
                  <div class="number">
                    {{ top.db1 || 0 }}
                  </div>
                </div>
                <div
                  class="cntj_item_content_item cntj_item_content_item50 flex_center_direction"
                >
                  <div class="number" style="color: #ffbc00">
                    {{ top.dbNk || 0 }}
                  </div>
                </div>
              </div>
            </div>
            <!-- <img src="@/assets/images/echarts/zu2.png" alt="" class="and" /> -->
            <div class="cntj_item backgroung">
              <nav class="flex_center">
                <div
                  class="cntj_item_content_item cntj_item_content_item50 flex_center_direction"
                >
                  维修费用
                </div>
                <div
                  class="cntj_item_content_item cntj_item_content_item50 flex_center_direction"
                  style="color: #ffbc00"
                >
                  内控
                </div>
              </nav>
              <div class="cntj_item_content flex_between">
                <div
                  class="cntj_item_content_item cntj_item_content_item50 flex_center_direction"
                >
                  <div class="number">
                    {{ top.sj1 || 0 }}
                  </div>
                </div>
                <div
                  class="cntj_item_content_item cntj_item_content_item50 flex_center_direction"
                >
                  <div class="number" style="color: #ffbc00">
                    {{ top.wxfyNk || 0 }}
                  </div>
                </div>
              </div>
            </div>
            <!-- <img src="@/assets/images/echarts/zu2.png" alt="" class="and" /> -->
            <div class="cntj_item backgroung">
              <nav class="flex_center">
                <div class="cntj_item_content_item flex_center_direction">
                  不达标项数量
                </div>
                <!-- <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  内控
                </div> -->
              </nav>
              <div class="cntj_item_content flex_between">
                <div class="cntj_item_content_item flex_center_direction">
                  <div class="number">
                    {{ top.bdb1 || 0 }}
                  </div>
                </div>
                <!-- <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number" :class="top.sj2<0? 'numberRight': '' ">
                    {{ top.sj2  }}
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </StrokeTitle2>
    </div>
    <div class="content_center">
      <StrokeTitle2
        title="统计分析"
        class="float margin"
        style="width: 99%"
        :isCenter="true"
      >
        <!-- <div class="flex_center" style="position: absolute; top: 40px" > -->
        <ElementRadio
          slot="select"
          v-model="model"
          :options="[
            {
              value: 'lastMonth',
              label: '上月',
            },
            { value: 'quarter', label: '当季' },
          ]"
          :isButton="true"
          @change="radioChange2"
        />
        <!-- </div> -->
        <!-- <ElementRadio v-model="model" :isButton="true" @change="radioChange2" /> -->
        <div class="flex_center_direction bdb_box" slot="content">
          <StrokeOrnament
            title="人均产出"
            style="margin: 10px 0 5px 0"
          ></StrokeOrnament>
          <div class="flex_center Echarts" style="height: 220px">
            <div
              style="width: 110px; height: 110px"
              class="flex_center_direction"
            >
              <Ring
                style="width: 90px; height: 90px"
                :data="{ allRate: center1.a1 }"
                :subtext="'内控:' + center1.sumNk"
                titleTop="32%"
              />
              <div
                class="label"
                style="
                  background: rgba(0, 0, 0, 0);
                  margin-top: 1px;
                  text-align: center;
                "
              >
                实际值(标准箱)
              </div>
            </div>
            <div class="contrasts_box">
              <div class="contrasts_box_item flex_center">
                <div class="left_box flex_between_direction">环比变化</div>
                <!-- <div class="right_box flex_center_direction">
                  <div class="right_box_top flex_center">

                    <div class="baifenbi " v-if="center1.permom>=0">
                      {{center1.permom}}%
                      <img src="@/assets/images/echarts/sheng.png" alt="" v-if="center1.permom>0">
                    </div>
                    <div class="baifenbi text_shadow_danger" v-else>
                      {{center1.permom}}%
                      <img style="transform: rotate(180deg)" src="@/assets/images/echarts/sheng.png" alt="">
                    </div>
                  </div>
                  {{center1.mom}}
                </div> -->
                <div class="right_box flex_center_direction">
                  <div class="right_box_top flex_center">
                    <div
                      class="baifenbi text_shadow_danger"
                      v-if="center1.peryoy >= 0"
                    >
                      {{ center1.peryoy }}%
                      <img
                        style="transform: rotate(180deg)"
                        src="@/assets/images/echarts/jiang.png"
                        alt=""
                        v-if="center1.peryoy > 0"
                      />
                    </div>
                    <div class="baifenbi" v-else>
                      {{ center1.peryoy }}%
                      <img
                        style="transform: rotate(180deg)"
                        src="@/assets/images/echarts/sheng.png"
                        alt=""
                      />
                    </div>
                  </div>
                  {{ center1.yoy }}
                </div>
              </div>
              <div class="contrasts_box_item flex_center">
                <div class="left_box flex_between_direction">同比变化</div>
                <div class="right_box flex_center_direction">
                  <div class="right_box_top flex_center">
                    <div
                      class="baifenbi text_shadow_danger"
                      v-if="center1.peryoy >= 0"
                    >
                      {{ center1.peryoy }}%
                      <img
                        style="transform: rotate(180deg)"
                        src="@/assets/images/echarts/jiang.png"
                        alt=""
                        v-if="center1.peryoy > 0"
                      />
                    </div>
                    <div class="baifenbi" v-else>
                      {{ center1.peryoy }}%
                      <img
                        style="transform: rotate(180deg)"
                        src="@/assets/images/echarts/sheng.png"
                        alt=""
                      />
                    </div>
                  </div>
                  {{ center1.yoy }}
                </div>
              </div>
            </div>

            <!-- <PieImg legendLabel="" style="height: 180px; margin-top: -15px" legendLeft="38%" :data="top21" titleLeft="25.5%" titleTop="89%" cirTop="1" :isTitle="true" length="5" itemWidth="0.93" cirLeft="0.7" :img="require('@/assets/images/echarts/ywl.png')" /> -->
            <!-- <div class="title">{{ top2[0] }}</div> -->
          </div>
        </div>
        <div class="backBor" slot="content"></div>
        <div class="flex_center_direction bdb_box" slot="content">
          <StrokeOrnament
            title="单班产出率"
            style="margin: 10px 0 5px 0"
          ></StrokeOrnament>
          <div class="flex_center Echarts" style="height: 220px">
            <div
              style="width: 110px; height: 110px"
              class="flex_center_direction"
            >
              <Ring
                style="width: 90px; height: 90px"
                :data="{ allRate: center2.a1 }"
                :subtext="'内控:' + center2.dbNk"
                titleTop="32%"
                :subtextStyleSize="0.075"
              />
              <div
                class="label"
                style="
                  background: rgba(0, 0, 0, 0);
                  margin-top: 1px;
                  text-align: center;
                "
              >
                实际值
              </div>
            </div>
            <div class="contrasts_box">
              <div class="contrasts_box_item flex_center">
                <div class="left_box flex_between_direction">环比变化</div>
                <div class="right_box flex_center_direction">
                  <div class="right_box_top flex_center">
                    <div
                      class="baifenbi text_shadow_danger"
                      v-if="center2.permom >= 0"
                    >
                      {{ center2.permom }}%
                      <img
                        style="transform: rotate(180deg)"
                        src="@/assets/images/echarts/jiang.png"
                        alt=""
                        v-if="center2.permom > 0"
                      />
                    </div>
                    <div class="baifenbi" v-else>
                      {{ center2.permom }}%
                      <img
                        style="transform: rotate(180deg)"
                        src="@/assets/images/echarts/sheng.png"
                        alt=""
                      />
                    </div>
                  </div>
                  {{ center2.mom }}
                </div>
              </div>
              <div class="contrasts_box_item flex_center">
                <div class="left_box flex_between_direction">同比变化</div>
                <div class="right_box flex_center_direction">
                  <div class="right_box_top flex_center">
                    <div
                      class="baifenbi text_shadow_danger"
                      v-if="center2.peryoy >= 0"
                    >
                      {{ center2.peryoy }}%
                      <img
                        style="transform: rotate(180deg)"
                        src="@/assets/images/echarts/jiang.png"
                        alt=""
                        v-if="center2.peryoy > 0"
                      />
                    </div>
                    <div class="baifenbi" v-else>
                      {{ center2.peryoy }}%
                      <img
                        style="transform: rotate(180deg)"
                        src="@/assets/images/echarts/sheng.png"
                        alt=""
                      />
                    </div>
                  </div>
                  {{ center2.yoy }}
                </div>
              </div>
            </div>

            <!-- <PieImg legendLabel="" style="height: 180px; margin-top: -15px" legendLeft="38%" :data="top21" titleLeft="25.5%" titleTop="89%" cirTop="1" :isTitle="true" length="5" itemWidth="0.93" cirLeft="0.7" :img="require('@/assets/images/echarts/ywl.png')" /> -->
            <!-- <div class="title">{{ top2[0] }}</div> -->
          </div>
        </div>
        <div class="backBor" slot="content"></div>
        <div class="flex_center_direction bdb_box" slot="content">
          <StrokeOrnament
            title="维修费用"
            style="margin: 10px 0 5px 0"
          ></StrokeOrnament>
          <div class="flex_center Echarts" style="height: 220px">
            <div
              style="width: 110px; height: 110px"
              class="flex_center_direction"
            >
              <Ring
                style="width: 90px; height: 90px"
                :data="{ allRate: center3.a1 }"
                :subtext="'内控:' + center3.wxfyNk"
                titleTop="32%"
              />
              <div
                class="label"
                style="
                  background: rgba(0, 0, 0, 0);
                  margin-top: 1px;
                  text-align: center;
                "
              >
                实际值(元/千标准箱)
              </div>
            </div>
            <div class="contrasts_box">
              <div class="contrasts_box_item flex_center">
                <div class="left_box flex_between_direction">环比变化</div>
                <div class="right_box flex_center_direction">
                  <div class="right_box_top flex_center">
                    <div
                      class="baifenbi text_shadow_danger"
                      v-if="center3.permom >= 0"
                    >
                      {{ center3.permom }}%
                      <img
                        style="transform: rotate(180deg)"
                        src="@/assets/images/echarts/jiang.png"
                        alt=""
                        v-if="center3.permom > 0"
                      />
                    </div>
                    <div class="baifenbi" v-else>
                      {{ center3.permom }}%
                      <img
                        style="transform: rotate(180deg)"
                        src="@/assets/images/echarts/sheng.png"
                        alt=""
                      />
                    </div>
                  </div>
                  {{ center3.mom }}
                </div>
              </div>
              <div class="contrasts_box_item flex_center">
                <div class="left_box flex_between_direction">同比变化</div>
                <div class="right_box flex_center_direction">
                  <div class="right_box_top flex_center">
                    <div
                      class="baifenbi text_shadow_danger"
                      v-if="center3.peryoy >= 0"
                    >
                      {{ center3.peryoy }}%
                      <img
                        style="transform: rotate(180deg)"
                        src="@/assets/images/echarts/jiang.png"
                        alt=""
                        v-if="center3.peryoy > 0"
                      />
                    </div>
                    <div class="baifenbi" v-else>
                      {{ center3.peryoy }}%
                      <img
                        style="transform: rotate(180deg)"
                        src="@/assets/images/echarts/sheng.png"
                        alt=""
                      />
                    </div>
                  </div>
                  {{ center3.yoy }}
                </div>
              </div>
            </div>

            <!-- <PieImg legendLabel="" style="height: 180px; margin-top: -15px" legendLeft="38%" :data="top21" titleLeft="25.5%" titleTop="89%" cirTop="1" :isTitle="true" length="5" itemWidth="0.93" cirLeft="0.7" :img="require('@/assets/images/echarts/ywl.png')" /> -->
            <!-- <div class="title">{{ top2[0] }}</div> -->
          </div>
        </div>
      </StrokeTitle2>
    </div>
    <div class="content_bottom">
      <StrokeTitle2
        title="当年十二月数据"
        class="float margin"
        style="width: 99%"
      >
        <span slot="select" style="margin-right: 10px"
          >当前均值={{ bottomLabel }}</span
        >
        <el-select
          v-model="bottomForm"
          placeholder="请选择"
          size="mini"
          style="width: 160px"
          @change="kanbanPan12"
          slot="select"
        >
          <el-option
            v-for="item in [
              { label: '人均产出', value: 'rj' },
              { label: '单班产出率', value: 'db' },
              { label: '维修费用', value: 'wx' },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <MoreDirection3
          :data="bottom"
          :legendData="['实际']"
          slot="content"
          :isMoretooltip="true"
          :isCategory="false"
          barWidth="16"
          style="height: calc(100% - 0px)"
          :yAxisLineShow="true"
          :xAxisLineShow="true"
          yUnit=""
        />
      </StrokeTitle2>
    </div>
  </div>
</template>
<script>
import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
import MoreDirection3 from "@/components/echarts/bar/moreDirection3.vue"; //多个纵向柱状图上下
import { KanbanLeft, reachStandardCount2 } from "@/api/report/complain/unstand";
import {
  KanbanPan1,
  KanbanPan2,
  KanbanPan3,
  KanbanPan12,
} from "@/api/echarts/seven/reachStandard";
import NormalLine from "@/components/echarts/line/normal.vue";

export default {
  components: {
    NormalLine,
    StrokeTitle2,
    MoreDirection3,
  },
  data() {
    return {
      model: "lastMonth",
      model2: "month",
      selectList: [
        { value: "", label: "全部" },
        { value: "1", label: "选项一" },
      ],
      // 统计数据
      top: {
        db1: 0,
        db2: 0,
        qy1: 0,
        qy2: 0,
        sj2: 0,
        sj1: 0,
        bdb2: 0,
        bdb1: 0,
        sumNk: 0,
        wxfyNk: 0,
        dbNk: 0,
      },
      top1Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
        // val: 1,
        ggname: null,
      },

      // 统计分析
      top21: [],
      top22: [],
      top23: [],
      top2: [],
      top2Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
      },
      centerForm: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
      },
      //人均产出
      center1: {
        a1: 0, //实际值
        yoy: 0, //同比
        peryoy: 0, //环比百分比
        mom: 0, //环比
        permom: 0, //同比百分比
        sumNk: 0,
      },
      //单班产出率
      center2: {
        a1: 0, //实际值
        yoy: 0, //同比
        peryoy: 0, //环比百分比
        mom: 0, //环比
        permom: 0, //同比百分比
        dbNk: 0,
      },
      //维修费用
      center3: {
        a1: 0, //实际值
        yoy: 0, //同比
        peryoy: 0, //环比百分比
        mom: 0, //环比
        permom: 0, //同比百分比
        wxfyNk: 0,
      },
      //当年十二月数据
      bottom: [],
      bottomLabel: 0,
      //当年十二月数据表单
      bottomForm: "rj",
      color: ["blue", "orange", "green", "pink"],
    };
  },
  created() {
    this.reachStandardCount1(); // 不达标趋势
    // this.reachStandardCount2(); // 统计分析
    // this.reachStandardCount3(); // 不达标统计
    this.kanbanPan1(); //人均产出
    this.kanbanPan2(); //单班产出率
    this.kanbanPan3(); //维修费用
    this.kanbanPan12(); //维修费用
  },
  methods: {
    // 不达标趋势
    radioChange1(e) {
      this.top1Form.ksrq = e[0];
      this.top1Form.jsrq = e[1];
      this.reachStandardCount1();
    },
    // selectList1(e) {
    //   console.log(e);
    //   this.top1Form.ggname = e;
    //   if (e == "全部") {
    //     this.top1Form.val = 1;
    //   } else {
    //     this.top1Form.val = 0;
    //   }
    //   this.reachStandardCount1();
    // },
    reachStandardCount1() {
      KanbanLeft(this.top1Form).then((res) => {
        if (res.code == 200) {
          this.top = res.data;
          this.top.qy1 = Number(this.top.qy1).toFixed(2);
          this.top.db1 = Number(this.top.db1).toFixed(2);
          this.top.bdb1 = Number(this.top.bdb1).toFixed(2);
          this.top.sj1 = Number(this.top.sj1).toFixed(2);
          this.top.sumNk = Number(this.top.sumNk).toFixed(2);
          this.top.wxfyNk = Number(this.top.wxfyNk).toFixed(2);
          this.top.dbNk = Number(this.top.dbNk).toFixed(2);
        }
      });
    },

    // 统计分析
    radioChange2(e) {
      this.centerForm.ksrq = e[0];
      this.centerForm.jsrq = e[1];
      this.kanbanPan1(); //人均产出
      this.kanbanPan2(); //单班产出率
      this.kanbanPan3(); //维修费用
    },
    // reachStandardCount2() {
    //   reachStandardCount2(this.top2Form).then((res) => {
    //     // console.log(2222, res);
    //     if (res.code == 200) {
    //       if (res.data.data1[0] == null) {
    //         this.top21 = [];
    //       } else {
    //         this.top21 = res.data.data1;
    //       }
    //       if (res.data.data2[0] == null) {
    //         this.top22 = [];
    //       } else {
    //         this.top22 = res.data.data2;
    //       }
    //       if (res.data.data3[0] == null) {
    //         this.top23 = [];
    //       } else {
    //         this.top23 = res.data.data3;
    //       }
    //       this.top2 = res.data.yData1;
    //     }
    //   });
    // },
    //人均产出
    kanbanPan1() {
      KanbanPan1(this.centerForm).then((res) => {
        if (res.code == 200) {
          this.center1 = res.data;
          this.center1.a1 = Number(this.center1.a1).toFixed(2);
          this.center1.yoy = Number(this.center1.yoy).toFixed(2);
          this.center1.mom = Number(this.center1.mom).toFixed(2);
          this.center1.peryoy = (Number(this.center1.peryoy) * 100).toFixed(2);
          this.center1.permom = (Number(this.center1.permom) * 100).toFixed(2);
          this.center1.sumNk = Number(this.center1.sumNk).toFixed(2);
        }
      });
    },
    //单班产出率
    kanbanPan2() {
      KanbanPan2(this.centerForm).then((res) => {
        if (res.code == 200) {
          this.center2 = res.data;
          this.center2.a1 = Number(this.center2.a1).toFixed(2);
          this.center2.yoy = Number(this.center2.yoy).toFixed(2);
          this.center2.mom = Number(this.center2.mom).toFixed(2);
          this.center2.peryoy = (Number(this.center2.peryoy) * 100).toFixed(2);
          this.center2.permom = (Number(this.center2.permom) * 100).toFixed(2);
          this.center2.dbNk = Number(this.center2.dbNk).toFixed(2);
        }
      });
    },
    //维修费用
    kanbanPan3() {
      KanbanPan3(this.centerForm).then((res) => {
        if (res.code == 200) {
          this.center3 = res.data;
          this.center3.a1 = Number(this.center3.a1).toFixed(2);
          this.center3.yoy = Number(this.center3.yoy).toFixed(2);
          this.center3.mom = Number(this.center3.mom).toFixed(2);
          this.center3.peryoy = (Number(this.center3.peryoy) * 100).toFixed(2);
          this.center3.permom = (Number(this.center3.permom) * 100).toFixed(2);
          this.center3.wxfyNk = Number(this.center3.wxfyNk).toFixed(2);
        }
      });
    },
    //维修费用
    kanbanPan12() {
      KanbanPan12({ bbbh: this.bottomForm }).then((res) => {
        if (res.code == 200) {
          this.bottom = res.data;
          let number = 0;
          let temp = 0;
          for (let item of this.bottom) {
            item.name = item.month;
            number += Number(item.value);
            item.value1 = item.value;
            if (item.value != 0) {
              temp++;
            }
          }
          if (res.data.length != 0) {
            this.bottomLabel = (number / temp).toFixed(2);
          }
          if (number == 0) {
            this.bottomLabel = 0;
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.seven_content {
  z-index: 10;
  background: #093b76;
  width: 100%;
  height: calc(100vh - 183px);
  overflow: auto;
  overflow-x: hidden;
  .content_top,
  .content_bottom,
  .content_center {
    //   background: red;
    width: 100%;
    height: 40.8%;
  }
  .content_top {
    height: 26.6%;
    // background: red;
  }
  .content_bottom {
    height: 33.9%;
  }

  .bzjk_box {
    width: 100%;
    height: 88%;
    padding: 2px 3%;
    .cntj_item {
      width: 24.5%;
      background: linear-gradient(
        180deg,
        rgba(44, 119, 187, 0.5) 0%,
        rgba(18, 81, 141, 0.5) 100%
      );
      border: 1px solid #2489ee71;
      height: 100%;
      padding: 10px;
      color: #31fcf9;
      nav {
        font-size: 18px;
        // background: rgba(35, 107, 173, 0.7);
        height: 42%;
        width: 100%;
        justify-content: space-between;
        text-align: center;
        .cntj_item_content_item {
          background: rgba(35, 107, 173, 0.7);
          width: 100%;
          height: 99%;
        }
        .cntj_item_content_item50 {
          width: 49%;
        }
      }

      .cntj_item_content {
        width: 100%;
        height: 56%;
        margin-top: 2%;
        .cntj_item_content_item {
          width: 100%;
          background-image: url("~@/assets/images/echarts/zhuangshi.png");
          background-size: 100% 100%;
          height: 100%;
          background-color: rgba(35, 107, 173, 0.7);
          .number {
            font-size: 32px;
          }
          .numberRight {
            color: #f52b2e;
          }
          .unit {
            font-size: 13px;
            margin-top: 0.2% !important;
            color: #ffffff;
          }
        }
        .cntj_item_content_item-100 {
          width: 100%;
        }
        .cntj_item_content_item50 {
          width: 49%;
        }
      }
    }
    .and {
      margin: 0 20px;
    }
  }
  @media screen and (max-width: 1200px) {
    .bzjk_box {
      padding: 2px 1%;
      justify-content: space-between;
      .cntj_item {
        width: 24%;
        padding: 6px;
        .number {
          font-size: 26px !important;
        }
      }
    }
    .and {
      width: 0px;
    }
    .contrasts_box {
      margin-left: 20px !important;
      .contrasts_box_item {
        width: 200px !important;
        padding: 0 10px !important;
        height: 60px !important;
      }
    }
  }

  .Echarts {
    height: calc(100% - 50px);
    position: relative;
    .title {
      position: absolute;
      width: 100px;
      height: 20px;
      background: rgba(0, 218, 218, 0.3);
      border-radius: 5px;
      color: #d4f0ff;
      line-height: 20px;
      font-size: 14px;
      text-align: center;
      left: 14%;
      bottom: 4%;
    }
    .title2 {
      left: 12.7%;
    }
  }
  .bdb_box {
    padding: 5px 0;
    width: 32%;
    height: 100%;
    justify-content: flex-start;
  }
  .contrasts_box {
    width: 200px;
    height: 145px;
    color: #ffffff;
    margin-left: 70px;
    font-size: 13px;
    .contrasts_box_item {
      width: 220px;
      margin: 10px 0;
      height: 65px;
      // height: 80px;
      // height: 100%;
      background: linear-gradient(
        180deg,
        rgba(44, 119, 187, 0.8) 0%,
        rgba(18, 81, 141, 0.8) 100%
      );
      border: 1px solid #3486da;
      justify-content: space-between;
      padding: 0 20px;
      .left_box {
        width: 30%;
        height: 100%;
        // padding:4% 0 0 0;

        justify-content: center;
        .jidi {
          width: 50%;
        }
        .title {
          padding: 7% 8%;
          font-size: 14px;
          color: #ffffff;
        }
        // border-bottom: 2px solid #23c3ff;
      }
      .right_box {
        width: 54%;
        background-size: 100% 100%;
        height: 86%;
        font-size: 19px;
        color: #31fcf9;
        justify-content: flex-end;
        align-items: flex-end;
        background: url("~@/assets/images/echarts/tupiandiwen.png");
        .right_box_top {
          width: 100%;
          height: 50%;
          font-size: 28px;
          text-align: left;
          justify-content: flex-end;
          .baifenbi {
            font-size: 14px;
            margin-left: 15px;
            position: relative;
            top: -7px;
            img {
              width: 11px;
              margin-left: -5px;
              margin-top: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
<style>
.seven_content .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  height: 2rem !important;
  background: #125496 !important;
}
.seven_content .el-table tr {
  height: 2rem !important;
}
.more {
  width: 135px;
  height: 22px;
  background: linear-gradient(180deg, #2c77bb 0%, #12518d 100%);
  border: 1px solid #3486da;
  border-radius: 10px;
  font-size: 14px;
  color: #d4f0ff;
  text-align: center;
  cursor: pointer;
}
</style>
